<template>
  <dv-charts :option="option" />
</template>

<script>
import { changeDefaultConfig } from "@jiaminghi/charts";

export default {
  name: "LineChart",
  props: {
    // 数据
    chartsLineData: {
      type: Object,
      required: true,
    },
    // 是否平滑曲线
    isSmooth: {
      type: Boolean,
      required: false,
      default:false
    },
    // 是否显示数值标签
    labelIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否显示图例
    legendIsShow: {
      type: Boolean,
      required: false,
      default: false
    },
    // 是否堆叠显示
    isStack: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  data() {
    return {
      option: {},
    };
  },
  methods: {
    createChart() {
      // 修改默认配置
      changeDefaultConfig("xAxis", this.$utils.chartsDefaultOptions.xAxisParam);
      changeDefaultConfig("yAxis", this.$utils.chartsDefaultOptions.yAxisParam);
      // 循环数据，取出图例legend下的data数据
      let _legendData = [];
      this.chartsLineData.legend.forEach((item) => {
        _legendData.push({
          name: item,
        });
      });
      // console.log(_legendData)
      // 循环数据，取出series下的data数据
      let _series = [];
      this.chartsLineData.series.forEach((item, index) => {
        // 根据参数判断stack类型
        if (this.isStack) {
          _series.push({
            name: this.chartsLineData.legend[index],
            data: item,
            type: "line",
            smooth: this.isSmooth,
            lineStyle: {
              lineWidth: 2
            },
            stack: "a", //可以是任何字符串。
            label: {
              show: this.labelIsShow
            }
          });
        } else {
          _series.push({
            name: this.chartsLineData.legend[index],
            data: item,
            type: "line",
            smooth: this.isSmooth,
            lineStyle: {
              lineWidth: 2
            },
            stack: index,
            label: {
              show: this.labelIsShow
            }
          });
        }
      });
      this.option = {
        legend: {
          show: this.legendIsShow,
          textStyle: {
            fill: '#ccc'
          },
          data: _legendData
        },
        xAxis: {
          data: this.chartsLineData.xAxis,
        },
        yAxis: {
          data: "value",
        },
        series: _series,

      };
    },
  },
  watch: {
    chartsLineData: {
      handler(newValue, oldValue) {
        if (oldValue != newValue) {
          this.createChart();
        }
      },
      deep: true,
    },
  },
};
</script>

</style>
